import React from 'react'

interface MagnifierProps extends React.PropsWithoutRef<JSX.IntrinsicElements['svg']> {
    engaged?: boolean
}

export function Magnifier({ engaged = false, ...props }: MagnifierProps): JSX.Element {
    return (
        <svg width="34" height="42" viewBox="0 0 34 42" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
            <path
                fillRule="evenodd"
                clipRule="evenodd"
                d="M13.3967 8.30682C6.42789 8.30682 0.775696 13.8249 0.775696 20.6185C0.775696 27.4122 6.42789 32.9156 13.3967 32.9156C15.4951 32.9156 17.4508 32.3725 19.192 31.4889L28.4785 40.5424C29.5074 41.546 31.1991 41.5704 32.2568 40.597L32.2954 40.5617C33.3531 39.5883 33.3738 37.9884 32.342 36.9882L27.9588 32.7391L23.296 28.1498C24.9717 26.0617 26.0172 23.4752 26.0172 20.6185C26.0172 13.8249 20.3649 8.30682 13.3967 8.30682Z"
                fill={engaged ? '#5362FD' : '#8F98FF'}
            />
            <path
                fillRule="evenodd"
                clipRule="evenodd"
                d="M4.21771 20.6248C4.21771 15.5723 8.26811 11.4767 13.2642 11.4767C18.2607 11.4767 22.3106 15.5723 22.3106 20.6248C22.3106 25.6769 18.2607 29.7725 13.2642 29.7725C8.26811 29.7725 4.21771 25.6769 4.21771 20.6248Z"
                fill="#CED2FF"
            />
            <path
                fillRule="evenodd"
                clipRule="evenodd"
                d="M10.8274 12.8533C10.9517 13.1192 10.5266 14.3205 9.87801 15.5363L7.61345 19.782C6.96482 20.9974 6.33832 21.7675 6.21405 21.501C6.08979 21.2351 6.51483 20.0339 7.16346 18.818L9.42849 14.5723C10.0767 13.3565 10.7032 12.5869 10.8274 12.8533Z"
                fill="white"
            />
            <path
                fillRule="evenodd"
                clipRule="evenodd"
                d="M12.9173 12.7576C13.0237 12.9868 12.6599 14.0215 12.104 15.0688L10.1637 18.7257C9.60829 19.7725 9.07169 20.4352 8.96531 20.206C8.85893 19.9768 9.22278 18.9422 9.77821 17.8953L11.7189 14.2384C12.2743 13.1916 12.811 12.5284 12.9173 12.7576Z"
                fill="white"
            />
            <path
                fillRule="evenodd"
                clipRule="evenodd"
                d="M14.5633 13.3028C14.7276 13.4436 14.6335 14.0122 14.3534 14.5728L13.3739 16.5314C13.0938 17.092 12.7332 17.4323 12.5689 17.292C12.4047 17.1513 12.4988 16.5827 12.7789 16.0221L13.7584 14.0635C14.0385 13.5029 14.399 13.1626 14.5633 13.3028Z"
                fill="white"
            />
            <path
                fillRule="evenodd"
                clipRule="evenodd"
                d="M14.9336 15.519C14.9336 15.2159 15.1633 14.9702 15.4462 14.9702C15.7295 14.9702 15.9592 15.2159 15.9592 15.519C15.9592 15.8222 15.7295 16.0679 15.4462 16.0679C15.1633 16.0679 14.9336 15.8222 14.9336 15.519Z"
                fill="white"
            />
            {engaged ? (
                <>
                    <path
                        fillRule="evenodd"
                        clipRule="evenodd"
                        d="M11.1687 0.510796H11.6907C12.0969 0.510796 12.4269 0.875119 12.4269 1.32417V4.65017C12.4269 5.09969 12.0969 5.46354 11.6907 5.46354H11.1687C10.762 5.46354 10.4325 5.09969 10.4325 4.65017V1.32417C10.4325 0.875119 10.762 0.510796 11.1687 0.510796Z"
                        fill="#CED2FF"
                    />
                    <path
                        fillRule="evenodd"
                        clipRule="evenodd"
                        d="M16.3405 0.765771L16.8531 0.865088C17.2523 0.942284 17.5064 1.36215 17.4212 1.8032L16.7905 5.06894C16.7053 5.50999 16.3123 5.80465 15.9136 5.72745L15.4005 5.6286C15.0013 5.55141 14.7472 5.13154 14.8324 4.69049L15.4636 1.42475C15.5488 0.983704 15.9413 0.688575 16.3405 0.765771Z"
                        fill="#CED2FF"
                    />
                    <path
                        fillRule="evenodd"
                        clipRule="evenodd"
                        d="M21.589 2.27077L22.0696 2.47505C22.4438 2.63415 22.6048 3.09826 22.4292 3.51153L21.1277 6.57252C20.9521 6.9858 20.5064 7.19196 20.1322 7.03287L19.6516 6.82859C19.2778 6.66996 19.1169 6.20584 19.2924 5.79257L20.5939 2.73158C20.7695 2.3183 21.2153 2.11167 21.589 2.27077Z"
                        fill="#CED2FF"
                    />
                </>
            ) : null}
        </svg>
    )
}
